<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>Landing Page | Amaze UI Example</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
	<link rel="stylesheet" href="assets/css/amazeui.css" />
	<link rel="stylesheet" href="assets/css/zhuzong.css" />
</head>

<body class="zhuzong-bg-eee">
	<header class="am-topbar zhuzong-bg-393D49">
		<div class="am-container">
			<h1 class="am-topbar-brand">
				<a href="#">朱总的博客</a>
			</h1>

			<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only" data-am-collapse="{target: '#collapse-head'}"><span class="am-sr-only">导航切换</span> <span
        class="am-icon-bars"></span></button>


			<div class="am-collapse am-topbar-collapse" id="collapse-head">
				<ul class="am-nav am-nav-pills am-topbar-nav">
					<li class="am-active"><a href="#">首页</a></li>
					<li><a href="#">项目</a></li>
					<li class="am-dropdown" data-am-dropdown>
						<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
            下拉菜单 <span class="am-icon-caret-down"></span>
          </a>
						<ul class="am-dropdown-content">
							<li class="am-dropdown-header">标题</li>
							<li><a href="#">1. 默认样式</a></li>
							<li><a href="#">2. 基础设置</a></li>
							<li><a href="#">3. 文字排版</a></li>
							<li><a href="#">4. 网格系统</a></li>
						</ul>
					</li>
				</ul>

				<div class="am-topbar-right">
					<button class="am-btn am-btn-default am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span> 注册</button>
				</div>

				<div class="am-topbar-right">
					<button class="am-btn am-btn-success am-topbar-btn am-btn-sm"><span class="am-icon-user"></span> 登录</button>
				</div>
			</div>
		</div>
	</header>

	<div class='am-container am-g am-g-fixed blog-g-fixed'>

		<div class='am-u-md-8 am-padding-horizontal-0'>
			<section class="am-panel am-panel-default">
				3
			</section>

			<section class="am-panel am-panel-default">
				2
			</section>

		</div>


		<div class='am-u-md-4 am-padding-right-0'>
			<section class="am-panel am-panel-default">
				<div class="am-panel-hd">栏目标题 <a href="#" class="am-list-news-more am-fr">更多 &raquo;</a></div>
				<div class="am-panel-bd am-padding-vertical-xs">
					<div data-am-widget="list_news" class="am-list-news">

						<div class="am-list-news-bd">
							<ul class="am-list am-margin-bottom-0">
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>

							</ul>
						</div>

					</div>
				</div>
			</section>

			<section class="am-panel am-panel-default">
				<div class="am-panel-hd">热门标签</div>
				<div class="am-panel-bd am-cf">
					<div class="am-u-md-12 blog-clear-padding am-padding-0">
						<a href="" class="zhuzong-blog-tag">标签1</a>
						<a href="" class="zhuzong-blog-tag">标签1</a>
						<a href="" class="zhuzong-blog-tag">标签1</a>
						<a href="" class="zhuzong-blog-tag">标签1</a>
						<a href="" class="zhuzong-blog-tag">标签1</a>
						<a href="" class="zhuzong-blog-tag">标签1</a>
					</div>
				</div>
			</section>

			<section class="am-panel am-panel-default">
				<div data-am-widget="tabs" class="am-tabs am-tabs-default am-margin-0">
					<ul class="am-tabs-nav am-cf">
						<li class="am-active"><a class="am-icon-calendar" href="[data-tab-panel-0]"> 本日</a></li>
						<li class=""><a class="am-icon-calendar" href="[data-tab-panel-1]"> 本周</a></li>
						<li class=""><a class="am-icon-calendar" href="[data-tab-panel-2]"> 本月</a></li>
					</ul>
					<div class="am-tabs-bd">
						<div data-tab-panel-0 class="am-tab-panel am-active">
							<ul class="am-list am-margin-bottom-0">
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>

							</ul>
						</div>
						<div data-tab-panel-1 class="am-tab-panel ">
							<ul class="am-list am-margin-bottom-0">
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>

							</ul>
						</div>
						<div data-tab-panel-2 class="am-tab-panel ">
							<ul class="am-list am-margin-bottom-0">
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>
								<li class="am-list-item-dated">
									<a href="##" class="am-padding-xs am-padding-right-0">我很囧，你保重....晒晒旅行中的那些囧！</a>
								</li>

							</ul>
						</div>
					</div>
				</div>
		</section>

		<section class="am-panel am-panel-default">
			<div class="am-panel-hd">最热文章</div>
			<div class="am-panel-bd am-cf">
				<div class='am-u-md-12 am-padding-0 blog-article-list'>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<div>
					</div>
		</section>

		<section class="am-panel am-panel-default">
			<div class="am-panel-hd">精选文章</div>
			<div class="am-panel-bd am-cf">
				<div class='am-u-md-12 am-padding-0 blog-article-list'>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<a class='am-u-md-9 am-u-sm-9 am-padding-0 am-text-truncate pointer'>搜索水水水水所所所所所所所所所所所所所所所所</a><span class='am-u-md-3  am-u-sm-3 zhuzong-text-gyay am-text-center am-padding-0 am-icon-eye'> 22</span>
					<div>
					</div>
		</section>

		<section class="am-panel am-panel-default">
			<div class="am-panel-hd">友情链接</div>
			<div class="am-panel-bd am-cf">
				<div class="am-u-md-12 blog-clear-padding am-padding-0">
					<a href="" class="blog-link">朱总1</a>
					<a href="" class="blog-link">朱总1</a>
					<a href="" class="blog-link">朱总1</a>
					<a href="" class="blog-link">朱总1</a>
					<a href="" class="blog-link">朱总1</a>
					<a href="" class="blog-link">朱总1</a>
				</div>
			</div>
		</section>
		</div>

		</div>






		<footer class="footer">
			<hr class="am-divider am-divider-default" />
			<p class="am-text-center">© 2014 <a href="http://www.yunshipei.com" target="_blank">朱东旭-zhuzong</a></p>
		</footer>

		<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<!--<![endif]-->
		<script src="assets/js/amazeui.min.js"></script>
</body>

</html>